<template>
 <view class="main">
   <view class="logo">
	 <view class="ilist" @click="myitem">
	    <image src="https://ppp.new.zeroitem.cn/ppp/menu.png" style="width:64rpx;height:64rpx"></image>
	 </view>
	 <image src="https://ppp.new.zeroitem.cn/ppp/logo.png" class="imglog"></image>   
   </view>
   <view class="part1">
	 <view class="zp1">
		<view class="zp1-1">自定义接单</view> 
		<view class="mp1-2">
		  <view class="item" :class="[{'scur':stab==6}]" @click="settab(6)">
			 <view class="mpart mcur1">
			 <view class="gp1"></view>
			 <view class="gp2"></view>
			 <view class="gp3"></view>	
			 </view> 
			  超全天
		  </view>
		  
		  <view class="item" :class="[{'scur':stab==4}]" @click="settab(4)">
			 <view class="mpart mcur7">
			 <view class="gp1"></view>
			 <view class="gp2"></view>
			 <view class="gp3"></view>	
			 </view>  
			 全天(早中)
		  </view>		  
		  
		  <view class="item" :class="[{'scur':stab==5}]" @click="settab(5)">
			 <view class="mpart mcur8">
			 <view class="gp1"></view>
			 <view class="gp2"></view>
			 <view class="gp3"></view>	
			 </view>  
			 全天(中晚)
		  </view>		  
		  
		  <view class="item" :class="[{'scur':stab==1}]" @click="settab(1)">
			 <view class="mpart mcur4">
			 <view class="gp1"></view>
			 <view class="gp2"></view>
			 <view class="gp3"></view>	
			 </view>  
			 早
		  </view>
		  <view class="item" :class="[{'scur':stab==2}]" @click="settab(2)">
			 <view class="mpart mcur5">
			 <view class="gp1"></view>
			 <view class="gp2"></view>
			 <view class="gp3"></view>	
			 </view> 
			  中
		  </view>
		  <view class="item" :class="[{'scur':stab==3}]" @click="settab(3)">
			 <view class="mpart mcur6">
			 <view class="gp1"></view>
			 <view class="gp2"></view>
			 <view class="gp3"></view>	
			 </view>
			  晚
		  </view>
							  
		  <view class="item" :class="[{'scur':stab==0}]" @click="settab(0)">
			 <view class="mpart mcur3">
			 <view class="gp1"></view>
			 <view class="gp2"></view>
			 <view class="gp3"></view>	
			 </view>  
			 清除
		  </view>							  
							  
							  
		</view>
		<view class="mp1-3">
		  请先选择您需要的接单时间段（比如全天,早，中，晚等）。然后再点击下方的日历来完成当天的接单时间设置
		 </view> 
	 </view> 
   <view class="cal">  
   <view class="cp1">
   		<view class="cp1-1">{{sdatestr1}}</view> 
   		<view class="cp1-2"></view>
   </view>	   
   <view class="cp3">
   		<view class="cp3-1">一</view>  
   		<view class="cp3-1">二</view>
   		<view class="cp3-1">三</view>
   		<view class="cp3-1">四</view>
   		<view class="cp3-1">五</view>
   		<view class="cp3-1">六</view>
   		<view class="cp3-1">日</view>
   </view>
	  <view class="cp4" v-for="(item1,index1) in cal1">
		<view class="cp4-1" :class="[{'cur1':'100'==item2.zt},{'cur2':item2.zt=='010'},{'cur3':item2.zt=='001'},{'cur4':item2.zt=='110'},{'cur5':item2.zt=='011'},{'cur6':item2.zt=='101'},{'cur7':item2.zt=='111'}]" v-for="(item2,index2) in item1" @click="setcal(index1,index2,1)">
		<view class="mp1"></view>
		<view class="mp2">{{item2.day}}</view>
		<view class="mp3"></view>	
		</view> 		
	  </view>
	 <view class="cal">  
   <view class="cp1">
   		<view class="cp1-1">{{sdatestr2}}</view> 
   		<view class="cp1-2"></view>
   </view>	   
   <view class="cp3">
   		<view class="cp3-1">一</view>  
   		<view class="cp3-1">二</view>
   		<view class="cp3-1">三</view>
   		<view class="cp3-1">四</view>
   		<view class="cp3-1">五</view>
   		<view class="cp3-1">六</view>
   		<view class="cp3-1">日</view>
   </view>
	  <view class="cp4" v-for="(item3,index3) in cal2">
		<view class="cp4-1" :class="[{'cur1':'100'==item4.zt},{'cur2':item4.zt=='010'},{'cur3':item4.zt=='001'},{'cur4':item4.zt=='110'},{'cur5':item4.zt=='011'},{'cur6':item4.zt=='101'},{'cur7':item4.zt=='111'}]" v-for="(item4,index4) in item3" @click="setcal(index3,index4,2)">
		<view class="mp1"></view>
		<view class="mp2">{{item4.day}}</view>
		<view class="mp3"></view>	
		</view> 		
	  </view>	 
   </view>
	<view class="btn2">
	  <view class="bcbtn" @click="savep">确认保存</view>  
	 </view>			
   </view>
   </view>
 </view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		toLogin
	} from '@/utils/login'
	
	import {
		loadingFun,
		menuJump
	} from '@/utils/tools'	
	import {
	  zdycal,savezdycal,savezdycal1 
	} from '@/api/ppp'		
    import {
		loadingType
	} from '@/utils/type'
	const app = getApp()
	export default {
		data() {
			return {
			 cal1:[],
			 cal2:[],
			 sdate1:"",
			 sdatestr1:"",
			 sdate2:"",
			 sdatestr2:"",
			 stab:-1
			}
		},
		onLoad() {
		},
		onShow() {
		 this.getcal();
		},

		onReachBottom() {
	    
		},
		onPullDownRefresh() {

		},

		methods: {
	    myitem(){
		  uni.navigateBack();
		},
        settab(type){
		 this.stab=type;	
		},
		setcal(index1,index2,type){
		  var stab=this.stab;
		  if(type==1){var info=this.cal1;}
		  if(type==2){var info=this.cal2;}
		  if(stab!=-1 &&　info[index1][index2]['day']!=''){
			if(stab==0){var str='000';}
			if(stab==1){var str='100';}  
			if(stab==2){var str='010';} 
			if(stab==3){var str='001';}
			if(stab==4){var str='110';}  
			if(stab==5){var str='011';}  
			if(stab==6){var str='111';}
			info[index1][index2]['zt']=str;
			if(type==1){this.cal1=info;}
			if(type==2){this.cal2=info;}
			var pdate=info[index1][index2]['pdate'];
			this.save_sigal_cal(pdate,str);
		  }else{
			uni.showToast({
			  icon:'none',
			  title:'请选择上面的接单时间类型，然后在相应的日历时间上打勾。'
			})  
		  }
		  var pdate=info[index1][index2]['pdate'];
		  
		},
		async save_sigal_cal(pdate,str){
		 const{
		   data
		 }= await savezdycal1({pdate:pdate,str:str});	
		},
        async savep(){
		  var cal1=JSON.stringify(this.cal1);
		  var cal2=JSON.stringify(this.cal2);
		  const{
		    data
		  }= await savezdycal({cal1:cal1,cal2:cal2});
		  uni.showToast({title:"设置成功",icon:"none"});  
		  setTimeout(function(){
			uni.navigateBack({})
		  },2000)
		},
		async getcal(){
			const{
			 code,
			  msg,
			  data
			}= await zdycal({});
			if(code==1){ 
			  this.cal1=data.cal1;
			  this.cal2=data.cal2;
			  this.sdate1=data.sdate1;
			  this.sdate2=data.sdate2;
			  this.sdatestr1=data.sdatestr1;
			  this.sdatestr2=data.sdatestr2;
			}  
		  }
		},
		computed: {
			...mapGetters(['isLogin']),
		}
	}	
  </script>
<style>
 @import "./dyjd.css";	
</style>
